<template>
  <n-modal
      :title="modalTitle"
      :mask-closable="false"
      preset="card" style="width: 500px;height: 600px"
      v-model:show="modalShow"
  >
    <SForm
        ref="formRef"
        :x-gap="0"
        :model="formValue"
        label-placement="left"
    >
      <n-gi :span="24">
        <SFormUploadImg name="picFileId"
                    label="歌单封面"
                    :data="{folderName:'songListPic'}"
                    v-model:value="formValue.picFileId"
                    @load-rules="loadRules"/>
      </n-gi>
      <n-gi :span="24">
        <SFormInput name="name"
                    label="歌单名称"
                    required
                    v-model:value="formValue.name"
                    @load-rules="loadRules"/>
      </n-gi>
    </SForm>
    <template #action>
      <n-button type="primary" @click="addSubmit">保存</n-button>
    </template>
  </n-modal>
</template>
<script setup>

import SForm from "@/components/public/extForm/SForm.vue";
import SFormInput from "@/components/public/extForm/SFormInput.vue";
import {addSongList} from "@/api/music/songListApi";
import useSModal from "@/components/public/SModal/useSModal";
import SFormUploadImg from "@/components/public/extForm/SFormUploadImg.vue";

const formDefValue = {

}
const api = {
  addApi:addSongList
}
const {
  onAdd,
  loadRules,
  modalShow,
  modalLoading,
  modalTitle,onSubmit,
  formValue,
  formRef,
} = useSModal("歌单",formDefValue,api);
let router = useRouter();
const addSubmit = ()=>{
  onSubmit().then(res=>{
    router.go(0)
  })
}
defineExpose({
  onAdd,
  modalLoading
})
</script>